// var
@tab-prefix-cls         : x-tab;
@tab-font-weight        : normal;
@tab-font-size-small    : 12px;
@tab-font-size          : 14px;
@tab-font-size-large    : 16px;
@tab-adorn-size         : 4px;
@tab-disable-color      : #c5c8ce;
@tab-disable-bg         : #f7f7f7;
@tab-disable-border     : #dcdee2;

// mixins
.tab-size(@font-size; @adorn-size) {
  font-size: @font-size;
  .@{tab-prefix-cls}__icon {
    width: @font-size * 3.2;
    height: @font-size * 3.2;
    &_inner {
      &::before, &::after {
        width: @adorn-size;
        height: @adorn-size;
      }
    }
    &::before, &::after {
      width: @adorn-size;
      height: @adorn-size;
    }
  }
  .@{tab-prefix-cls}__label {
    width: @font-size * 3.2;
    height: @font-size * 2.6;
  }
  .@{tab-prefix-cls}__dot {
    padding: @font-size * 0.35;
    border-radius: 50%;
  }
  .@{tab-prefix-cls}__badge {
    padding: @font-size * 0.2 @font-size * 0.35;
    border-radius: @font-size * 0.7;
  }
}
.tab-color(@color) {
  color: @color;
  .@{tab-prefix-cls}__icon {
    border-color: @color;
    &_inner {
      border-color: @color;
      background-color: tint(@color, 80%);
      &::before, &::after {
        border-color: @color;
        background-color: @color;
      }
    }
    &::before, &::after {
      border-color: @color;
      background-color: tint(@color, 80%);
    }
  }
  &.@{tab-prefix-cls}-circle {
    &:hover, &.active {
      .@{tab-prefix-cls}__icon {
        &_inner {
          background-color: tint(@color, 60%);
        }
      }
    }
  }
}
.tab-group-size(@adorn-size; @flag) {
  .@{tab-prefix-cls}-group__adorn_rect {
    width: @adorn-size * 1.25;
    height: @adorn-size * 1.25;
  }
  .@{tab-prefix-cls}-group__adorn_line {
    width: @adorn-size * 2;
    margin: @adorn-size * 1.5 * @flag;
  }
  .@{tab-prefix-cls}-group__adorn_line_first {margin-left: @adorn-size / 2;}
  .@{tab-prefix-cls}-group__adorn_line_last {margin-right: @adorn-size / 2;}
  .@{tab-prefix-cls} + .@{tab-prefix-cls} {
    margin-left: @adorn-size * 6;
    &::before  {
      left: -@adorn-size * 4;
      width: @adorn-size * 2;
    }
    &.@{tab-prefix-cls}-circle {
      margin-left: @adorn-size * 4.5;
      &::before  {
        left: -@adorn-size * 3.25;
        width: @adorn-size * 2;
      }
    }
  }
}
.tab-group-color(@color) {
  .@{tab-prefix-cls}-group__adorn_rect,
  .@{tab-prefix-cls}-group__adorn_line {
    border-color: @color;
  }
  .@{tab-prefix-cls} + .@{tab-prefix-cls} {
    &::before  {
      border-color: @color;
    }
  }
}

// styles - default
.@{tab-prefix-cls} {
  display: inline-block;
  font-weight: @tab-font-weight;
  touch-action: manipulation;
  user-select: none;
  position: relative;
  .tab-size(@tab-font-size; @tab-adorn-size);
  .tab-color(@default-color);
  .@{tab-prefix-cls}__icon {
    margin: auto;
    padding: @tab-adorn-size;
    border-width: 2px;
    border-style: solid;
    cursor: pointer;
    transition: all .35s linear;
    &_inner {
      width: 100%;
      height: 100%;
      border-width: 1px;
      border-style: solid;
      font-weight: 600;
      transition: all .35s linear;
      position: relative;
      cursor: pointer;
      .flex-center;
    }
  }
  .@{tab-prefix-cls}__label {
    position: absolute;
    font-weight: bold;
    white-space: nowrap;
    transition: all .35s linear;
    .flex-center;
  }
  .@{tab-prefix-cls}__dot,
  .@{tab-prefix-cls}__badge {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    font-size: 0.75em;
    color: #fff;
    white-space: nowrap;
    background-color: @danger-color;
    .flex-center;
  }
  &-rhomb {
    .@{tab-prefix-cls}__icon {
      border-width: 2px;
      transform: rotate(-45deg);
      &_inner {
        &::before, &::after {
          content: "";
          position: absolute;
          width: @tab-adorn-size;
          height: @tab-adorn-size;
          border-width: 1px;
          border-style: solid;
          transition: all .35s linear;
        }
        &::before { left: 0; top: 0; }
        &::after { right: 0; bottom: 0; }
        * {
          transform: rotate(45deg);
          transition: all .35s linear;
        }
      }
    }
    &.active {
      .@{tab-prefix-cls}__icon {
        transform: rotate(0deg);
        &_inner {
          transform: rotate(45deg);
          * { transform: rotate(-45deg); }
        }
      }
    }
  }
  &-circle {
    .@{tab-prefix-cls}__icon {
      border-width: 1px;
      border-radius: 50%;
      &_inner {
        border-width: 0;
        border-radius: 50%;
      }
      &::before,
      &::after {
        content: "";
        border-width: 1px;
        border-style: solid;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
      }
      &::before {left: 0;}
      &::after {left: 100%;}
    }
  }
}
.@{tab-prefix-cls}-group {
  .flex-center;
  &__adorn_rect {
    border-width: 1px;
    border-style: solid;
    transform: rotate(45deg);
  }
  &__adorn_line {
    height: 0;
    border-top-width: 1px;
    border-top-style: solid;
  }
  .@{tab-prefix-cls} + .@{tab-prefix-cls} {
    &::before  {
      content: "";
      position: absolute;
      top: 50%;
      height: 0;
      border-top-width: 1px;
      border-top-style: solid;
    }
  }
  .tab-group-color(@default-color);
  .tab-group-size(@tab-adorn-size; 1);
}

// styles - more
.@{tab-prefix-cls} {
  &-small {
    .tab-size(@tab-font-size-small; @tab-adorn-size);
  }
  &-large {
    .tab-size(@tab-font-size-large; @tab-adorn-size * 1.25);
  }
  &-brown {
    .tab-color(@brown-color);
  }
  &-primary {
    .tab-color(@primary-color);
  }
  &-success {
    .tab-color(@success-color);
  }
  &-warning {
    .tab-color(@warning-color);
  }
  &-danger {
    .tab-color(@danger-color);
  }
  &-info {
    .tab-color(@info-color);
  }
  &.is-disabled {
    .tab-color(@tab-disable-color);
    &, .@{tab-prefix-cls}__icon {
      cursor: not-allowed;
      pointer-events: none;
    }
  }
}
.@{tab-prefix-cls}-group {
  &-small {
    .@{tab-prefix-cls} {
      .tab-size(@tab-font-size-small; @tab-adorn-size);
    }
  }
  &-large {
    .tab-group-size(@tab-adorn-size; 1.25);
    .@{tab-prefix-cls} {
      .tab-size(@tab-font-size-large; @tab-adorn-size * 1.25);
    }
  }
  &-brown {
    .tab-group-color(@brown-color);
    .@{tab-prefix-cls} {
      .tab-color(@brown-color);
    }
  }
  &-primary {
    .tab-group-color(@primary-color);
    .@{tab-prefix-cls} {
      .tab-color(@primary-color);
    }
  }
  &-success {
    .tab-group-color(@success-color);
    .@{tab-prefix-cls} {
      .tab-color(@success-color);
    }
  }
  &-warning {
    .tab-group-color(@warning-color);
    .@{tab-prefix-cls} {
      .tab-color(@warning-color);
    }
  }
  &-danger {
    .tab-group-color(@danger-color);
    .@{tab-prefix-cls} {
      .tab-color(@danger-color);
    }
  }
  &-info {
    .tab-group-color(@info-color);
    .@{tab-prefix-cls} {
      .tab-color(@info-color);
    }
  }
}
